<div class="row">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <pie-chart></pie-chart>
  </div>
</div>

<div class="row">
  <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-12"
                     cardTitle="dashboard.acquisition_channels" baCardClass="traffic-panel medium-card">
    <traffic-chart></traffic-chart>
  </ba-card>

  <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-12"
           cardTitle="dashboard.users_by_country" baCardClass="medium-card">
    <users-map></users-map>
  </ba-card>
</div>

<div class="row">
  <div class="col-xlg-9 col-xl-6 col-lg-6  col-md-12 col-sm-12 col-12">
    <div class="row">
      <ba-card class="col-xlg-8 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-12"
               cardTitle="dashboard.revenue" baCardClass="medium-card">
        <line-chart></line-chart>
      </ba-card>
      <ba-card class="col-xlg-4 col-xl-12 col-lg-12 col-md-5 col-sm-12 col-12"
               baCardClass="popular-app medium-card">
        <popular-app></popular-app>
      </ba-card>
    </div>
  </div>

  <div class="col-xlg-3 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
    <ba-card cardTitle="dashboard.feed"
             baCardClass="large-card with-scroll feed-panel">
      <feed></feed>
    </ba-card>
  </div>

</div>

<div class="row shift-up">
  <ba-card class="col-xlg-3 col-lg-6 col-md-12 col-sm-12 col-12" cardTitle="dashboard.todo_list"
           baCardClass="xmedium-card feed-comply-panel with-scroll todo-panel">
    <todo></todo>
  </ba-card>
  <ba-card class="col-xlg-6 col-lg-6 col-md-12 col-sm-12 col-12" cardTitle="dashboard.calendar"
           baCardClass="xmedium-card feed-comply-panel with-scroll calendar-panel">
    <calendar></calendar>
  </ba-card>
</div>
